<template>
  <div class="charts">
    <div class="asset-charts">
      <div class="search">
        <p>设备状态报表</p>
        <div class="charts-s">车间： <Selects v-model="workshop_id" style="width: 240px" action="factoryList" :query="{ category: 2 }" /> <el-button type="primary">搜索</el-button></div>
      </div>
      <div class="pie"><div><e-charts style="width: 96%;height: 60vh" autoresize :option="option" /></div></div>
    </div>
  </div>
</template>

<script>
import Selects from '@/components/select'
// import * as echarts from 'echarts'
export default {
  components: {
    Selects
  },
  data() {
    return {
      workshop_id: null
    }
  },
  created() {},
  computed: {
    option() {
      return {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: ' center',
          padding: [10, 30, 4, 1],
          itemWidth: 20
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '在用' },
              { value: 735, name: '停用' },
              { value: 580, name: '拆除' },
              { value: 484, name: '待报废' },
              { value: 300, name: '维修中' },
              { value: 484, name: '委外' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.charts{
  background-color: #dfe4ed;
  padding: 0.8vw;
}
.asset-charts {
  background-color: #fff;
  width: 100%;
  height: 90vh;
  border-radius: 10px;
}
.search{
  display: flex;
  flex-direction: column;
}
.search p{
  margin-top: 20px;
  margin-left: 18px;
  font-size: 20px;
}
.charts-s{
  padding-top: 4vh;
  margin-left: 35%;
}
.pie{
  width: 90vh;
  margin: 50px auto;
}
</style>
